<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>web成果展示</title>
		<link rel="stylesheet" type="text/css" href="./css/自定义栅格.css" />
		<link rel="stylesheet" type="text/css" href="./css/aboutMe.css" />
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
		<link rel="shortcut icon" href="./img/木.png">
	</head>
	<style type="text/css">
		/*头部特殊样式*/
		#header .container ul a.aboutMe {background: #08C3B4;}
		/*头部特殊样式结束*/
		
		/*侧边栏部分*/
		.aboutMe_con {width: 100%;margin:5px;overflow: hidden;}
		.aboutMe_con .container{overflow: hidden;}
		.aboutMe_con .container .menu {width: 20%;height: 100%;float: left;background: #404040;border-radius: 5px;}
		.aboutMe_con .container .menu ul {padding: 5px;}
		.aboutMe_con .container .menu ul li {height: 100%;color: #fff;display: block;line-height: 30px;padding-left: 5px;}
		.aboutMe_con .container .menu ul.introduce li:hover {background: #08C3B4;}
		.aboutMe_con .container .menu ul .me{text-align: center;padding: 5px ;}
		.aboutMe_con .container .menu ul .me img{width: 90%;height:240px;margin: 0 auto;}
		.aboutMe_con .container .menu ul.skill .title i{width: 30px;height: 30px;}
		.aboutMe_con .container .menu ul.skill .title,.title i{font-size: 20px;}
		.aboutMe_con .container .menu ul.skill li{margin: 5px 0px;}
		.aboutMe_con .container .menu ul.skill li .kinds{line-height: 1em;}
		.aboutMe_con .container .menu ul.skill li span{width: 30%;margin-left:5px;}
		.aboutMe_con .container .menu ul.skill li .progress{width:60%;height: 10px;background: #7FE5D0;margin-top:5px;float: left;}
		.aboutMe_con .container .menu ul.skill li .progress:before{display: block;content: '';width: 70%;height: 100%;background: #1388DF;}
		/*侧边栏部分结束*/
		
		/*内容部分*/
		.aboutMe_con .container .mainContent {width: 80%;float: left;padding: 20px 10px 10px;color: #000;}
		.aboutMe_con .container .mainContent .title{width: 100%;height: 30px;border-bottom: 2px solid #000;}
		.aboutMe_con .container .mainContent .info{height: 100px;width: 100%;}
		/*内容部分结束*/
	</style>

	<body>
		<div id="myHome">
			<!--头部开始-->
			<div id="header" class="clearfix">
				<div class="header_fix">
					<div class="container">
						<div class="row clearfix" >
							<a href="index.html"  class="col-xs-6 logo"><i></i></a>
						<ul>
							<a href="index.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-mu"></i>
									<span>首页</span>
								</li>
							</a>
							<a href="aboutMe.html" class="col-xs-6 ">
								<li class="aboutMe">
									<i class="iconfont icon-wo"></i>
									<span>关于我</span>
								</li>
							</a>
							<a href="music.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-yinle"></i> 音乐
								</li>
							</a>
							<a href="photos.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-zhaopian"></i>
									<span>相册</span>
								</li>
							</a>
							<a href="diary.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-diary"></i>
									<span>日记</span>
								</li>
							</a>
							<a href="travel.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-lvhang1"></i> 旅行
								</li>
							</a>

							<a href="contactME.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-dianhua"></i>
									<span>联系我</span>
								</li>
							</a>
							<a href="webProduct.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-xiangmu"></i>
									<span>web作品展示</span>
								</li>
							</a>
						</ul>
						</div>
						
					</div>
				</div>

			</div>
			<!--头部结束-->
			<!--内容部分-->
			<div class="aboutMe_con">
				<div class="container">
					<div class="menu">
						<ul class="introduce">
							<div class="me">
								<img src="./img/15.jpg"/>
							</div>
								<li>
									<i class="iconfont icon-mu1"></i>
									<span>1992/07</span>
								</li>
								<li >
									<i class="iconfont icon-xiaoren"></i>
									<span>湖南省长沙市</span>
								</li>
								<li>
									<i class="iconfont icon-yinle"></i>
									<span>电话：17377876272</span>
								</li>
								<li>
									<i class="iconfont icon-xiangce"></i>
									<span>1639425708@qq.com</span>
								</li>
						</ul>
						<ul class="skill">
							<div class="title"><i class="iconfont icon-mu1"></i>技能、特长</div>
							<li>
								<div class="kinds">英语交际</div>
								<div class="progress">
								</div>
								<span>精通</span>
							</li>
							<li>
								<div class="kinds">办公软件</div>
								<div class="progress">
								</div>
								<span>精通</span>
							</li>
							<li>
								<div class="kinds">html+css</div>
								<div class="progress">
								</div>
								<span>精通</span>
							</li>
							<li>
								<div class="kinds">javascript</div>
								<div class="progress">
								</div>
								<span>精通</span>
							</li>
						</ul>
						
						<ul class="skill">
							<div class="title"><i class="iconfont icon-mu1"></i>兴趣、爱好</div>
							<li>
								<div class="kinds">英语交际</div>
								<div class="progress">
								</div>
								<span>精通</span>
							</li>
							<li>
								<div class="kinds">办公软件</div>
								<div class="progress">
								</div>
								<span>精通</span>
							</li>
							
						</ul>
						
						
						
					</div>
					<div class="mainContent">
							<div class="title">
								<i></i>
								<span>教育背景</span>
							</div>
							<div class="info">
								<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
						    </div>
						    <div class="title">
								<i></i>
								<span>工作经验</span>
							</div>
							<div class="info">
								<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
						    </div>
						    <div class="title">
								<i></i>
								<span>教育背景</span>
							</div>
							<div class="info">
								<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
						    </div>
						    <div class="title">
								<i></i>
								<span>自我评价</span>
							</div>
							<div class="info">
								<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
						    </div>
						    <div class="title">
								<i></i>
								<span>教育背景</span>
							</div>
							<div class="info">
								<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
						    </div>
						    <div class="title">
								<i></i>
								<span>教育背景</span>
							</div>
							<div class="info">
								<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
						    </div>
						   
					    </div>
					</div>
				</div>
			

			<!--内容部分结束-->

			<!--底部部分-->
			<div id="footer">
				<div class='container'>
					<div class='footer_link'>web前端学习常用链接：
						<a href="https://github.com/">github</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
					</div>
					<p>本网站作者：张琴琳，所有的内容由本人原创，侵权必究。</p>
				</div>
			</div><br />
			<!--底部部分结束-->

			<!--回到顶部按钮-->
			<div class="toTOP">
				<div class="f_top">

				</div>
			</div>
			<!--回到顶部按钮结束-->
		</div>
	</body>

</html>